/* components/detail/CommentItem.wxss */
.comment-item {
  width: 100%;
  .user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    .midle {
      flex-grow: 1;
      margin-left: 20rpx;
      .au {
        .name {
          font-size: 28rpx;
          color: var(--text-blue);
        }
        .lvl {
          font-size: 24rpx;
          color: var(--text-red);
          margin-left: 10rpx;
        }
      }
      .time {
        font-size: 24rpx;
        color: var(--text-gray);
        display: flex;
        align-items: center;
        .rate {
          margin-right: 20rpx;
        }
      }
    }
    .right {
      display: flex;
      align-items: center;
      font-size: 36rpx;
      > text {
        font-size: 24rpx;
        margin-right: 10rpx;
      }
      .icon{
        margin-right: 10rpx;
      }
    }
  }
  .comment-content {
    width: 100%;
    font-size: 28rpx;
    box-sizing: border-box;
    padding-left: 96rpx;
    > view {
      margin: 20rpx 0;
      word-break: break-all;
      > text {
        display: inline-block;
        color: var(--text-red);
        color: var(--text-yellow2);
        background-color: var(--bgc-yellow3);
        padding: 4rpx 8rpx;
        border-radius: 4rpx;
        margin-right: 10rpx;
      }
    }
    .img-list{
      width: 100%;
      display: flex;
      .img-box{
        width: 180rpx;
        height: 180rpx;
        aspect-ratio: 1/1;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 3%;
        border-radius: 8rpx;
        overflow: hidden;
        image{
          width: 180rpx;
          height: 180rpx;
          aspect-ratio: 1/1;
        }
      }
    }
    .reply {
      width: 100%;
      box-sizing: border-box;
      padding:4rpx 8rpx;
      border-radius: 8rpx;
      background-color: var(--bgc-gray);
      >view{
        margin: 10rpx 0;
      }
      .name{
        color: var(--text-gray);
      }
    }
  }
}